<template>
  <div class="data-file">
    <el-upload action="/"
      class="file-uploader"
      :auto-upload="false"
      :on-remove="handleRemove"
      :limit="2"
      :on-change="handleChange"
      :file-list="fileList">
      <el-button size="small" type="primary" icon="el-icon-upload2">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default () {
        return {}
      }
    }
  },

  data () {
    return {
      fileList: []
    }
  },

  watch: {
    value: {
      deep: true,
      handler () {
        this.refresh()
      }
    }
  },

  mounted () {
    this.refresh()
  },

  methods: {
    refresh () {
      if (this.value.src) {
        this.fileList = [
          { name: this.value.src, raw: this.value.raw}
        ]
      } else {
        this.fileList = []
      }
    },
    handleChange(file) {
      this.fileList.pop()
      this.fileList.push(file)
      this.$emit('input', { src: file.name, raw: file.raw })
    },
    handleRemove() {
      this.$emit('input', {})
    }
  }
}
</script>

<style lang="less" scoped>
.data-file {
  padding: 4px 0;
  .file-tip {
    color: #999;
    font-size: 12px;
    font-style: italic
  }
}
</style>